<html>
  <head>
        <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
        <script src="./jquery-3.2.1.js"></script>        
        <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <meta charset="UTF-8">
  </head>
  <body>

    <div class="container">
      <h1>统一建模语言理论测试</h1>
      <div class="row">
        <div class="col-md-3">
          <form class="form-inline">
            <div class="form-group">
                  <label for="first" >考试科目：建模语言</label>
            </div>
            <div class="form-group">
                  <label for="firstname" > 班级：</label>
                  <input type="text" class="form-control" name="first" id="班级" placeholder="1班">
            </div>
          </form>
        </div>

        <div class="col-md-3">
          <form class="form-inline">
            <div class="form-group">
                  <label for="first" >时间：100分钟</label>
            </div>
            <div class="form-group">
                <label for="firstname" >学号：</label>
                <input type="text" class="form-control" name="first"  id="学号" placeholder="001">
            </div>
          </form>
        </div>

        <div class="col-md-3">
          <form class="form-inline">
            <div class="form-group">
                 <label for="first" >总分：100分</label>
            </div>
            <div class="form-group">
                 <label for="firstname" >姓名：</label>
                <input type="text" class="form-control" name="first"  id="姓名" placeholder="王小闹">
            </div>
          </form>
        </div>

      </div>

      <h3>一、填空题（每空5分，共20分）</h3>
      <div class="row">
        <div class="col-md-12">
          <form class="form-inline" role="form" id="blank">
            <ol>
              <li style="margin-top:12px">
                <div class="form-group">
                  <label for="firstname">UML的中文全称是：</label>
                    <input type="text" class="form-control" name="last"
                             placeholder="统一建模语言">
                </div>
              </li>
              <li style="margin-top:12px">
                <div class="form-group">
                  <label for="last" >对象最突出的特征是：</label>
                  <input type="text" class="form-control" name="last"
                             placeholder="封装性">
                  <input type="text" class="form-control" name="last"
                               placeholder="继承性">
                  <input type="text" class="form-control"name="last"
                                 placeholder="多态性">
                </div>
              </li>
            </ol>
          </form>
        </div>
      </div>

      <h3>二、选择题（每题10分，共20分）</h3>
      <div class="row">
        <div class="col-md-12">
          <ol id="choice">
            <li>
                  <label for="name">UML与软件工程的关系是：</label>
            </li>
            <div class="radio">
              <label>
                      <input type="radio" name="options" id="optionsRadios1" value="A"> (A)UML就是软件工程
              </label>
            </div>
            <div class="radio">
              <label>
                      <input type="radio" name="options" id="optionsRadios2" value="B" > (B)UML参与到软件工程中软件开发的几个阶段
              </label>
            </div>
            <div class="radio">
              <label>
                      <input type="radio" name="options" id="optionsRadios3" value="C"> (C)UML与软件工程无关
              </label>
            </div>
            <div class="radio">
              <label>
                      <input type="radio" name="options" id="optionsRadios4" value="D"> (D)UML是软件工程的一部分
              </label>
            </div>
            <li><label for="name">Java语言支持：</label></li>
            <div class="radio">
              <label>
                          <input type="radio" name="options1" id="optionsRadios5" value="A" > (A)单继承
              </label>
            </div>
            <div class="radio">
              <label>
                          <input type="radio" name="options1" id="optionsRadios6" value="B"> (B)多继承
              </label>
            </div>
            <div class="radio">
              <label>
                          <input type="radio" name="options1" id="optionsRadios7" value="C"> (C)单继承和多继承都支持
              </label>
            </div>
            <div class="radio">
              <label>
                          <input type="radio" name="options1" id="optionsRadios8" value="D" >(D)单继承和多继承都不支持
              </label>
            </div>
          </ol>
        </div>  
      </div>

      <h3>三、多择题（每题10分，共20分）</h3>
      <div class="row">
        <div class="col-md-12">
          <ol>
            <li>
                <label for="name">用例的粒度分为以下哪三种：</label>
            </li>
            <div id="mulit1">
              <div class="checkbox">
                        <label><input type="checkbox" value="A"name="answer" >(A)概述级</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="B"name="answer" >(B)需求级</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="C">(C)用户目标级</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="D"name="answer" >(D)子功能级</label>
              </div>
            </div>

            <li><label for="name">类图由以下哪三部分组成：</label></li>
            <div id="mulit2">
              <div class="checkbox">
                        <label><input type="checkbox" value="A" name="answer" >(A)名称(Name)</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="B" name="answer" >(B)属性(Attribute)</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="C" name="answer" >(C)操作(Operation)</label>
              </div>
              <div class="checkbox">
                        <label><input type="checkbox" value="D">(D)方法(Function)</label>
              </div>
            </div>
          </ol>
                 
        </div>
      </div>

      <h3>四、判断题（每题10分，共20分）</h3>
      <div class="row">
        <div class="col-md-12">
          <ol  id="judge">
            <li>
                用例图只是用于和客户交流和沟通的，用于确定需求。
                <input type="radio" name="用例图"/ value="√">√
                <input type="radio" name="用例图"class="TT" value="×" />×	
            </li>
            <li>
                在状态图中，终止状态在一个状态图中允许有任意多个。
                <input type="radio" name="状态图"class="TT" value="√"/>√
                <input type="radio" name="状态图" value="×"/>×	
            </li>
          </ol>
        </div>
      </div>

      <h3>五、简答题（每题20分，共20分）</h3>
      <div class="row">
        <div class="col-md-12">
          <ol id="text">
            <li>简述什么是模型以及模型的表现形式？</li>
            <textarea rows="10" cols="100"></textarea><br />
            <div class=" col-lg-5" >
                  <button type="submit" class="btn btn-default" onclick="test()">计算分数</button>
            </div>
          </ol>
          <script src="index.js"> 
          </script>  
        </div>
      </div>

      <!--write your code here-->
      <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        计算总分
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          let's go for it !
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      </div>
    </div>

  </div>
</body>
</html>